/*
Version 1.2

Thanit@, Suparerk@

make AccordianMenu markup by data
- require jquery UI
- fix active action
- custom icon

sample data
{
    "data": [
	{ "id" : 1, "caption" : "Menu1", "link" : null, "icon" : "CSSName", "child" : [
		{ "id" : 11, "caption" : "Menu1.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : 12, "caption" : "Menu1.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : 13, "caption" : "Menu1.3", "link" : null, "icon" : null, "child" : null },
		{ "id" : 14, "caption" : "Menu1.4", "link" : null, "icon" : null, "child" : null }
	]
	},
	{ "id" : 2, "caption" : "Menu2", "link" : null, "icon" : "CSSName", "child" : [
		{ "id" : 21, "caption" : "Menu2.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : 22, "caption" : "Menu2.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : 23, "caption" : "Menu2.3", "link" : null, "icon" : null, "child" : null },
		{ "id" : 24, "caption" : "Menu2.4", "link" : null, "icon" : null, "child" : null }
	]
   	 },
	{ "id" : 3, "caption" : "Menu3", "link" : null, "icon" : "CSSName", "child" : [
		{ "id" : 31, "caption" : "Menu3.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : 32, "caption" : "Menu3.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : 33, "caption" : "Menu3.3", "link" : null, "icon" : null, "child" : null },
		{ "id" : 34, "caption" : "Menu3.4", "link" : null, "icon" : null, "child" : null }
	]
	},
	{ "id" : 4, "caption" : "Menu4", "link" : null, "icon" : "CSSName", "child" : [
		{ "id" : 41, "caption" : "Menu4.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : 42, "caption" : "Menu4.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : 43, "caption" : "Menu4.3", "link" : null, "icon" : null, "child" : [
			{ "id" : 431, "caption" : "Menu4.3.1", "link" : null, "icon" : null, "child" : null },
			{ "id" : 432, "caption" : "Menu4.3.2", "link" : null, "icon" : null, "child" : null },
			{ "id" : 433, "caption" : "Menu4.3.3", "link" : null, "icon" : null, "child" : null }
		]}
	]
    	},
	{ "id" : 5, "caption" : "Menu5", "link" : null, "icon" : "CSSName", "child" : null}
    ]
}

CSS (ui.sideMenu.css, * ui.icon.sideMenu.css * if have icon)
*/
(function($) {
///Menu Builder

jQuery.fn.buildSideMenu = function(settings) {
    var defaults = { dataURL: "sidemenudata.txt",loadTo:"#contentsHolder"}
    var options = jQuery.extend(defaults, settings);

    var holder = $(this);
	
	$.getJSON(options.dataURL, function(data) {
		var menuObj = data.data;
		var tab = 0; //tabindex
		var idTab = 1;
        holder.html("");
        $(menuObj).each(function(i) {
            if (menuObj[i].child != null) {
			  //*have icon ?
			  var headerIcon ="";
			  if(menuObj[i].icon != null ){var headerIcon = 'icon="header-' + menuObj[i].icon.toString()+'"'}
			  //menu name
              holder.append('<div class="sideCategory" id="sideMenu'+ menuObj[i].id.toString() +'"></div>');
              $('div#sideMenu' + menuObj[i].id.toString()).append('<h3 tabindex="' + tab.toString() + '" style="margin-bottom:1px" '+ headerIcon + '><a href="#">' + menuObj[i].caption.toString() + '</a></h3>');
			  //list submenu
          	  $('div#sideMenu' + menuObj[i].id.toString() + '').append('<div id="detail' + menuObj[i].id.toString() + '" class=" ui-state-default"></div>');
         	  $('div#detail' + menuObj[i].id.toString() + '').append('<ul class="category topCategory" id="subMenu' + menuObj[i].id.toString() + '"></ul>');
			  
           	  $(menuObj[i].child).each(function(d) {//child  loop *have dicimal*
					
                    $('ul#subMenu' + menuObj[i].id.toString()).append('<li id="childsubMenu' + menuObj[i].child[d].id.toString()  + '" link="'+ menuObj[i].child[d].link + '"><a href="#">' + menuObj[i].child[d].caption.toString() + '</a></li>');
					
                    if (menuObj[i].child[d].child != null) {//childsubMenu loops
						createChild(holder,menuObj[i].child[d]);
                    };
					
                });
				
            }
            else {
				//*have icon ?
			    var headerIcon ="";
			    if(menuObj[i].icon != null ){var headerIcon = 'icon="header-' + menuObj[i].icon.toString()+'"'}
				//menu name
                holder.append('<div class="sideNavigator" id="sideMenu' + menuObj[i].id.toString() + '"></div>');
                $('div#sideMenu' + menuObj[i].id.toString() + '').append('<ul id="head' + menuObj[i].id.toString() + '"></ul>');
                $('ul#head' + menuObj[i].id.toString()).append('<li tabindex="' + tab.toString() + '" class="ui-state-default ui-corner-all" '+headerIcon+ ' link="' + menuObj[i].link + '"><a href="#">' + menuObj[i].caption.toString() + '</a></li>');
            }
            tab++;
        });
		
		//active accordion
        activateSideMenu(holder,options.loadTo);
	
    });

};
//end ///Menu Builder
 		
})(jQuery);

/********* create all Child in obj *****************************************/
function createChild(holder,obj){
	//alert(obj.caption);
	 holder.find('li#childsubMenu' + obj.id.toString()).after('<ul class="category" id="subMenu' + obj.id.toString() + '"/>');
	$(obj.child).each(function(j) {//loop in child
		//create child list   
		holder.find('ul#subMenu' + obj.id.toString()).append('<li id="childsubMenu' + obj.child[j].id.toString()  + '" link="'+ obj.child[j].link + '"><a href="#">' + obj.child[j].caption.toString() + '</a></li>');
		if(obj.child[j].child){// if have child
			//alert(obj.child[j].caption)
			createChild(holder,obj.child[j]);//do again
		};
	});
};

/* active accordion*/
function activateSideMenu(objHolder, contentHolder){
	//make accordion
	$(".sideCategory").each(function(i){
		var menuTotal = $(".sideCategory").size()-1;
		if(i < menuTotal){
			$(".sideCategory").eq(i).accordion({active: false,collapsible: true});
		}else{
			//alert("a")
			$(".sideCategory").eq(menuTotal).accordion({active: false,collapsible: true,
				change: function(event, ui) {
					/*******scroll up if this is last node********/
					$(".ui-layout-west").scrollTop($(this).height())
				}//
			});
		}
	});
	
	/*** add icon ***********/
	var Menu = $(".sideCategory h3");
	Menu.each(function(i){
		var header = Menu.eq(i);
		/*** add icon ***********/
		if(header.attr("icon")){
			header.find(".ui-icon").css('left',60).before('<span class="sideMenuIcon '+header.attr("icon")+'"></span>');
			header.find("a").css('margin-left',50);
		}
		/*** add event ***********/
		header.click(function(){
			$(".sideNavigator ul li").removeClass("ui-state-focus");
		})
	});
	
	/*** add icon ***********/
	Menu = $(".sideNavigator ul li");
	Menu.each(function(i){
		var header = Menu.eq(i);
		/*** add event ***********/
		header.hover(function(){
			$(this).addClass("ui-state-hover");
		},function(){
			$(this).removeClass("ui-state-hover");
		}).click(function(){
			$(".sideNavigator ul li").removeClass("ui-state-focus");
			$(this).addClass("ui-state-focus");
		});
		/*** add icon ***********/
		if(header.attr("icon")){
			header.append('<span class="sideMenuIcon '+header.attr("icon")+'"></span>');
			header.find("a").css('margin-left',60);
		}else{
			header.find("a").css('margin-left',20);
		}
	});
	/******event********/
	$(".category li").click(function(){
		$(objHolder).find(".category li").css({'font-weight':'normal'});
		$(this).css({'font-weight':'bold'}).siblings().css({'font-weight':'normal'});
	}).toggle(function() {
		
		$(this).next("ul").slideUp(500,function(){						
			$(this).prev("li").find("a").addClass("ui-state-active ui-corner-all").css("padding",2);
		});
		
	},function() {
		
		$(this).next("ul").slideDown(500,function(){
			$(this).prev("li").find("a").removeClass("ui-state-active ui-corner-all").css("padding",2);
		});
	});
	
	objHolder.find(".sideNavigator ul li, .category li").click(function(){
		if($(this).attr('link') != 'null'){
			switchPage(contentHolder,$(this).attr('link'))
		}
  	});
	
	Menu="";
	header="";
	
}
